/*
 * 学生信息-详情信息-基本信息
 * @Author: ice
 * @Date: 2018-09-26 15:06:15
 * @Last Modified by: ice
 * @Last Modified time: 2018-10-08 14:48:32
 */
<template>
    <div class="details-base-container">
        <template v-if="student">
            <div
                class="operate-bar"
                v-if="authResult.auth_base_edit">
                <el-button
                    v-if="mode == 'view'"
                    type="primary"
                    size="small"
                    @click="fnChangeMode('edit')">编辑</el-button>
                <template v-else-if="mode == 'edit'">
                    <el-button
                        size="small"
                        @click="fnChangeMode('view')">取消</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="fnUpdateStudent">保存</el-button>
                </template>
            </div>
            <div
                class="base-main"
                :class="{'no-operater': !authResult.auth_base_edit}">
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>个人信息</span>
                    </div>
                    <div
                        class="card-content"
                        :class="{'show-edit': mode=='edit' && !student.id_number, 'uneditable-wrap': mode=='edit' && student.id_number }">
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-label">姓名：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.true_name | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.true_name">
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">性别：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.sex | filterSex }}</span>
                                    <el-select
                                        size="small"
                                        class="sex-select base-input"
                                        v-model="updateObj.sex"
                                        placeholder="请选择">
                                        <el-option
                                            label="男"
                                            :value="1" />
                                        <el-option
                                            label="女"
                                            :value="2" />
                                        <el-option
                                            label="未知"
                                            :value="0" />
                                    </el-select>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">年龄：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.age | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.age"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">籍贯：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.birth_province + student.birth_city | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.birth_city"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">民族：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.ethnic | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.ethnic"></div>
                            </div>
                            <div class="info-unit uneditable">
                                <div class="info-label">身份证号：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.id_number | emptyFilter }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="address-wrap">
                            <div class="address-title">收货地址</div>
                            <div class="address-list">
                                <div
                                    class="address-item"
                                    v-for="(item, index) in student.delivery_address"
                                    :key="index">
                                    {{ index+1 }}：{{ item.name + ' ' + item.phone + ' ' + item.address }}
                                </div>
                                <div
                                    class="address-item"
                                    v-if="!student.delivery_address || student.delivery_address.length <= 0">
                                    暂无收货地址
                                </div>
                            </div>
                        </div>

                    </div>
                </el-card>
                <el-card
                    class="box-card"
                    :class="{'show-edit': mode=='edit'}">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>在校信息</span>
                    </div>
                    <div class="card-content">
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-label">省份：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.province | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.province"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">城市：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.city | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.city"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">学校：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.school | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.school"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">校区：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.school_area | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.school_area"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">学院：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.school_college | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.school_college"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">专业：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.major | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.major"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">入学年份：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.enter_school_year | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.enter_school_year"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">毕业年份：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.finish_school_year }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.finish_school_year"></div>
                            </div>
                            <div class="info-unit uneditable">
                                <div class="info-label">年级：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.educate_year | filterEducateYear }}</span>
                                </div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">专业类别：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.major_kind | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.major_kind"></div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card
                    class="box-card"
                    :class="{'show-edit': mode=='edit'}">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>通讯信息</span>
                    </div>
                    <div class="card-content">
                        <div class="info-wrap">
                            <div class="info-unit uneditable">
                                <div class="info-label">手机：</div>
                                <div class="info-value">{{ student.phone | emptyFilter }}</div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">微信：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.wechat | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.wechat"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">QQ号：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.qq | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.qq"></div>
                            </div>
                            <div class="info-unit">
                                <div class="info-label">邮箱：</div>
                                <div class="info-value">
                                    <span class="base-view">{{ student.email | emptyFilter }}</span>
                                    <input
                                        class="base-input"
                                        v-model="updateObj.email"></div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>证件信息</span>
                    </div>
                    <div class="card-content">
                        <div class="pic-list">
                            <div class="pic-unit">
                                <div class="pic-label">学生证</div>
                                <div
                                    class="pic-value"
                                    v-for="(item, index) in student.student_card_pic"
                                    :key="index"
                                    :style="'background-image: url('+item+')'" />
                                <div
                                    v-if="student.student_card_pic.length <= 0"
                                    class="pic-value pic-empty">
                                    <div class="pic-empty-container">
                                        <div class="pic-empty-img" />
                                        <div class="pic-empty-desc">暂无上传</div>
                                    </div>
                                </div>
                            </div>
                            <div class="pic-unit">
                                <div class="pic-label">身份证</div>
                                <div
                                    v-if="student.id_card_num > 0"
                                    class="pic-value"
                                    :style="'background-image: url(//cdn.zsdx.cn/admin/images/student/id_card.png)'" />
                                <div
                                    v-if="student.id_card_num <= 0"
                                    class="pic-value pic-empty">
                                    <div class="pic-empty-container">
                                        <div class="pic-empty-img" />
                                        <div class="pic-empty-desc">暂无上传</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card
                    class="box-card"
                    :class="{'show-edit': mode=='edit'}">
                    <div
                        slot="header"
                        class="clearfix card-header">
                        <span>备注信息</span>
                    </div>
                    <div class="card-content">
                        <div class="info-wrap">
                            <div class="info-unit">
                                <div class="info-value">
                                    <span class="base-view">{{ student.remark | emptyFilter }}</span>
                                    <el-input
                                        class="base-input"
                                        type="textarea"
                                        :rows="4"
                                        v-model="updateObj.remark"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            authResult: {},
            mode: 'view',
            hd_user_no: '',
            student: '',
            updateObj: {}
        };
    },
    filters: {
        filterSex(val) {
            if (val == 1) {
                return '男';
            } else if (val == 2) {
                return '女';
            } else {
                return '未知';
            }
        },
        filterEducateYear(val) {
            if (val <= 1) {
                return '大一';
            } else if (val == 2) {
                return '大二';
            } else if (val == 3) {
                return '大三';
            } else if (val == 4) {
                return '大四';
            } else {
                return '其他';
            }
        },
        emptyFilter(val){
            if(val){
                return val;
            }
            return '--';
        }
    },
    methods: {
        init() {
            if (this.hd_user_no && !this.data) {
                this.fnGetStudent();
            }
        },
        fnGetStudent() {
            this.$post('/studata/student%5Cget', {
                hd_user_no: this.hd_user_no
            }, resp => {
                if (resp.code == 1) {
                    this.student = resp.data;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnUpdateStudent() {
            this.$post('/studata/student%5Cset', {
                hd_user_no: this.hd_user_no,
                true_name: this.updateObj.true_name,
                sex: this.updateObj.sex,
                age: this.updateObj.age,
                birth_province: this.updateObj.birth_province,
                birth_city: this.updateObj.birth_city,
                ethnic: this.updateObj.ethnic,
                wechat: this.updateObj.wechat,
                qq: this.updateObj.qq,
                email: this.updateObj.email,
                province: this.updateObj.province,
                city: this.updateObj.city,
                school: this.updateObj.school,
                school_area: this.updateObj.school_area,
                school_college: this.updateObj.school_college,
                major_kind: this.updateObj.major_kind,
                major: this.updateObj.major,
                enter_school_year: this.updateObj.enter_school_year,
                finish_school_year: this.updateObj.finish_school_year,
                remark: this.updateObj.remark
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '保存成功',
                        center: true
                    });
                    this.mode = 'view';
                    this.fnGetStudent();
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnChangeMode(mode) {
            this.updateObj = Object.assign({}, this.student);
            this.mode = mode;
        },
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.hd_user_no = this.$route.query.hd_user_no;
    }
};

</script>

 <style lang="less" scoped>
    .details-base-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .operate-bar {
      position: relative;
      text-align: right;
      padding: 12px 20px;
      background: #fff;
      box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.5);
      z-index: 1;
    }
    .base-main {
      width: 100%;

      height: calc(100% - 56px);
      padding: 15px;
      overflow: auto;
      box-sizing: border-box;
      &.no-operater {
        height: calc(100%);
      }
    }
    .box-card {
      margin-bottom: 26px;
    }
    .card-header span {
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .info {
      &-wrap {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
      }
      &-unit {
        width: 33%;
        text-align: left;
        min-width: 220px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 16px;
      }
      &-label {
        width: 70px;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      &-value {
        flex: 1;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.75);
        line-height: 22px;
      }
    }
    .address {
      &-wrap {
        margin-top: 30px;
      }
      &-title {
        font-size: 14px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.85);
      }
      &-list {
        margin-top: 12px;
        background: rgba(250, 250, 250, 1);
        padding: 25px;
        max-height: 235px;
        overflow: auto;
      }
      &-item {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        margin-bottom: 15px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .pic {
      &-list {
        width: 100%;
      }
      &-unit {
        margin-bottom: 12px;
        margin-right: -40px;
      }
      &-label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
      &-value {
        display: inline-block;
        width: 240px;
        height: 165px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: 12px;
        width: 240px;
        height: 165px;
        margin-right: 40px;
      }
      &-empty {
        position: relative;
        background:rgba(255,255,255,1);
        border:1px solid rgba(51,120,222,0.21);
        &-container {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
        }
        &-img {
          width: 53px;
          height: 42px;
          margin: 0 auto;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url(//cdn.zsdx.cn/admin/images/student/pic-empty.png);
        }
        &-desc {
          margin-top: 8px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.3);
          line-height: 20px;
          text-align: center;
        }
      }
    }
    .base-view {
      display: inline;
      line-height: 22px;
    }
    .base-input {
      display: none;
      line-height: 22px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
    .show-edit {
      .base-view {
        display: none;
      }
      .base-input {
        display: inline;
      }
      .uneditable {
        opacity: 0.5;
        .base-view {
          display: inline;
        }
        .base-input {
          display: none;
        }
      }
    }
    .uneditable-wrap {
      .base-view {
        display: inline;
      }
      .base-input {
        display: none;
      }
      .info-unit {
        opacity: 0.5;
      }
    }
</style>
<style lang="less">
    .sex-select {
      width: 80px;
      .el-input {
        width: 80px;
      }
    }
</style>
